<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>word</title>
    <style>
        img {
            width: 50px;
            height: 50px;
        }

        .box {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            background-color: #B4E4E4;
        }

        .box1 {
            width: 90%;
            height: 90%;
            background-color: #FEFECC;
        }
        .box2_exit {
            position: relative;
            top: 15px;
            left: 20px;
        }

        .box2_word {
            position: relative;
            top: 15px;
            right: 43%;
        }

        .box2_word>a {
            position: relative;
            top: -16px;
        }
        
        .box2_title{
            position: relative;
            top: -5px;
            left: 405px;
            font-style: normal;
            font-size: 36px;

        }

        .header_container {
            width: 100%;
            height: 15%;
            display: flex;
            flex-direction: row;
            /* justify-content: center; */
            justify-content: space-between;
            align-items: center;
        }

        .header_container>div:nth-child(2) {
            font-size: xx-large;
            font-weight: 900;
            line-height: 15%;
        }

        .msg_container {
            width: 100%;
            height: 70%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .msg_container>div {
            margin-top: 60px;
        }

        .msg {
            position: relative;
            width: 60%;
            height: 100px;
            background-color: white;
            line-height: 100px;
            text-indent: 4em;
        }

        .msg>img {
            position: absolute;
            right: 5%;
            top: 25px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">
            <div class="header_container">
                <div><img src="./images/退出.png" class="box2_exit" /></div>
                <div class="box2_word">
                    <img src="./images/笔记本.png"/>
                    <a clsss="box2_title">单词本</a>
                </div>
            </div>
            <div class="msg_container">
                <div class="msg">hello 你好 <img src="./images/delete.png" alt=""></div>
                <div class="msg">banana 香蕉 <img src="./images/delete.png" alt=""></div>
                <div class="msg">apple 苹果 <img src="./images/delete.png" alt=""></div>
            </div>
        </div>
    </div>

</body>

</html>